<template>
 <div class="flex-direction-Box">
   <div class="flex-direction-Row">
     <div class="flex-direction-Row-Title"> row主轴为水平方向，起点在左端</div>
     <div class="flex-direction-Row-Content">
        <div class="row"  v-for="(itme, index) in row" :key="index" :style="itme.Background">{{itme.rows}}</div>
     </div>

   </div>
   <div class="flex-direction-reverse">
     <div class="flex-direction-reverse-Title"> row-revers主轴为水平方向，起点在右端</div>
    <div class="flex-direction-reverse-Content">
      <div v-for="(itme,index) in reverse" :key="index" :style="itme.Background" class="reverse">{{itme.reverse}}</div>
    </div>
   </div>
   <div class="flex-direction-column">
      <div class="flex-direction-column-Title">column主轴为垂直方向，起点在上沿</div>
      <div class="flex-direction-column-Content">
        <div v-for="(itme,index) in column" :key="index" :style="itme.Background" class="column">{{itme.column}}</div>
      </div>
   </div>
   <div class="flex-direction-column-reverse">
     <div class="flex-direction-column-reverse-Title"> column-reverse主轴为垂直方向，起点在下沿</div>
     <div class="flex-direction-column-reverse-Content">
       <div v-for="(item, index) in columnReverse" :key="index" :style="item.Background"   class="column-reverse">{{item.columnReverse}}</div>
     </div>
   </div>
 </div>
</template>
<script>
     
export default {
  data(){ 
   

   return {
            row:[
              {Background:"backgroundColor:blue;",rows:"r"},
              {Background:"backgroundColor:red;",rows:"o"},
              {Background:"backgroundColor:pink;",rows:"w"}
            ],
              reverse:[
              {Background:"backgroundColor:#f40;",reverse:"r"},
              {Background:"backgroundColor:yellow;",reverse:"e"},
              {Background:"backgroundColor:skyblue;",reverse:"v"},
              {Background:"backgroundColor:#f40;",reverse:"e"},
              {Background:"backgroundColor:yellow;",reverse:"r"},
              {Background:"backgroundColor:skyblue;",reverse:"s"},
              {Background:"backgroundColor:red;",reverse:"e"}
              
            ],
            column:[
              {Background:"backgroundColor:#f40;",column:"c"},
              {Background:"backgroundColor:yellow;",column:"o"},
              {Background:"backgroundColor:skyblue;",column:"l"},
              {Background:"backgroundColor:#f40;",column:"u"},
              {Background:"backgroundColor:yellow;",column:"m"},
              {Background:"backgroundColor:skyblue;",column:"n"}
             
            ],
            columnReverse:[
              {Background:"backgroundColor:#f40;",columnReverse:"c"},
              {Background:"backgroundColor:yellow;",columnReverse:"o"},
              {Background:"backgroundColor:skyblue;",columnReverse:"l"},
               {Background:"backgroundColor:blue;",columnReverse:"|"},
              {Background:"backgroundColor:#f40;",columnReverse:"r"},
              {Background:"backgroundColor:yellow;",columnReverse:"e"},
              {Background:"backgroundColor:skyblue;",columnReverse:"v"}
            ]
            

         }
  },
 components: {

 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

    

  },
 created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

   this.start()

  },
  beforeMount:function (){

  },
  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。
    start(){
     this.$store.state.HeaderTitle = "flex-direction"
    }

  }

}

</script>

<style lang="scss"  scope>
 .flex-direction-Box {
   width: 100%;
   height: 100%;
color: white;
display: flex;
flex-direction: column;
justify-content: center;

 }
 .flex-direction-Row {
   flex: 1;
   background-color: #f40;
   display: flex;
   flex-direction: column;
   justify-content: center;

 }

//  flex-direction-Row
 .flex-direction-Row-Title {//主轴为水平方向，起点在左端
   flex: 1;
   background-color: blueviolet;
   color: burlywood;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .flex-direction-Row-Content {
       flex: 5;
       display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
       background-color: aquamarine;
 }
 .row{
   width: 20px;
   height: 20px;
   text-align: center;
   align-content: center;
   margin: 0 10px;
   

 }



 .flex-direction-reverse {
   flex: 1;
   background-color: yellowgreen;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

  .flex-direction-reverse-Title{
   height: 30px;
   width: 100%;
   background-color: lightcoral;
   color: burlywood;
   display: flex;
   justify-content: center;
   align-items: center;
 }
  .flex-direction-reverse-Content{
   flex: 5px;
   display: flex;
   flex-direction: row-reverse;
   justify-content: center;
   align-items: center;
 }
 .reverse {
   width: 20px;
   height: 20px;
   align-content: center;
   text-align: center;
   margin: 0 10px;
   
 }







 .flex-direction-column {
   flex: 1;
   background-color: skyblue;
   display: flex;
   flex-direction: column;
   
 }
 .flex-direction-column-Title {
    height: 30px;
    width: 100%;
    text-align: center;
    align-content: center;
    background-color: darkgreen;

 }
 .flex-direction-column-Content{
   flex: 1;
   display: flex;
   background-color: darkgray;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
.column {
  width: 20px;
  height: 20px;
  align-content: center;
  text-align: center;
  margin: 2px 0;
}




 .flex-direction-column-reverse{
   flex: 1;
   background-color: brown;
   display: flex;
   flex-direction: column;

 }
 .flex-direction-column-reverse-Tiele{
   height: 30px;
   width: 100%;
   background-color: burlywood;
   text-align: center;
   align-content: center;
 }
 .flex-direction-column-reverse-Content{
   flex: 1;
   display: flex;
   flex-direction: column-reverse;
   justify-content: center;
   align-items: center;
   background-color: coral;
 }
 .column-reverse{
   width: 20px;
   height: 20px;
   text-align: center;
   align-content: center;
   margin: 2px 0;
 }
</style>